<template>
  <TabPane
    :name="name"
    :label="label"
  >
    <p v-if="scores.length === 0">
      资源正在赶来的路上
    </p>
    <div
      v-for="score in scores"
      :key="`score-${score.id}`"
      class="app-score-card"
      :style="{ backgroundImage: `url(${fullUrl(score.thumb)})` }"
    >
      <span>{{ score.tag }} <a :href="fullUrl(score.file.path)"><Icon type="md-download" /></a></span>
    </div>
  </TabPane>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { Score, getScores } from '@/api/resources'
import { cdn } from '@/utils'

@Component({
  name: 'ScoreTab'
})
export default class extends Vue {
  private readonly name = 'score'
  private readonly label = '乐谱'
  @Prop() songId!: number
  private scores: Score[] = []

  get params (): CreateQueryParams {
    return {
      search: {
        'relatedSong.id': this.songId
      },
      join: [
        { field: 'file' },
        { field: 'relatedSong', select: ['id'] },
        { field: 'uploadedByUser', select: ['id', 'username', 'avatar'] }
      ]
    }
  }

  async created () {
    this.scores = (await getScores(this.params)).data
  }

  private fullUrl (path: string) {
    return cdn(path)
  }
}
</script>

<style lang="less" scoped>

.ivu-tabs-tabpane {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.app-score-card {
  width: 160px;
  height: 160*1.4px;
  margin: 16px;
  background-size: cover;
  display: flex;
  align-items: flex-end;

  >span {
    display:block;
    width: 100%;
    padding: 2px 6px;
    overflow: hidden;
    background-color: rgba(60, 60, 60, 0.6);
  }
}
</style>
